<script setup>
  import {
    base64_base_bg_image
  } from '@/static/base64'
  import lock_default_icon from '@/static/icons/lock_default.svg'
  import lock_selected_icon from '@/static/icons/lock_selected.svg'
  import unlock_default_icon from '@/static/icons/unlock_default.svg'
  import unlock_selected_icon from '@/static/icons/unlock_selected.svg'
  import {
    ref
  } from 'vue'

  import {
    onLoad,
    onHide,
    onShow
  } from '@dcloudio/uni-app'

  const baseBgImage = base64_base_bg_image // 背景图片
  const lockDefaultIcon = lock_default_icon // 上锁图标 - 默认状态
  const lockSelectedIcon = lock_selected_icon // 上锁图标 - 选中状态
  const unlockDefaultIcon = unlock_default_icon // 解锁图标 - 默认状态
  const unlockSelectedIcon = unlock_selected_icon // 解锁图标 - 选中状态

  const isCabinUnlocked = ref(true) // 是否已解锁，默认为已解锁状态

  // 解锁舱门
  const unlockCabin = () => {
    isCabinUnlocked.value = true
    // 这里可以添加解锁的实际逻辑

    openRoomDoor();
  }
  // 上锁舱门
  const lockCabin = () => {
    isCabinUnlocked.value = false
    // 这里可以添加上锁的实际逻辑

    closeStoreDoor();
  }


  const openRoomDoor = () => {
    uni.showLoading({
      title: '加载中',
    })

    uni.request({
      url: 'https://sharebilliardstcp.wteam.club/macback/openStoreDoor',
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: {
        roomId: wx.getStorageSync('global_room_id'),
      },

      success(res) {

        uni.request({
          url: 'https://sharebilliardstcp.wteam.club/macback/openRoomLight',
          method: 'GET',
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          data: {
            roomId: wx.getStorageSync('global_room_id'),
          },

          success(res) {

            console.log('打开房间门成功', res)
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
            })
          },
        })
      },
    })
  }
  const closeStoreDoor = () => {
    uni.showLoading({
      title: '加载中',
    })

    uni.request({
      url: 'https://sharebilliardstcp.wteam.club/macback/closeRoomDoor',
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: {
        roomId: wx.getStorageSync('global_room_id'),
      },

      success(res) {
        console.log('打开房间门成功', res)
        uni.hideLoading()
        uni.showToast({
          title: '操作成功',
          icon: 'success',
        })

      },
    })
  }


  // 检查当前时间与日期区间的关系
  const checkTimeRange = (startDateStr, endDateStr) => {
    if (uni.getStorageSync("startDate") == "" || uni.getStorageSync("endDate") == "") {

      uni.navigateTo({
        url: '/pages/reserve/index',
      })

    }


    // 1. 转换为 Date 对象
    const startDate = parseCustomDate(startDateStr);
    const endDate = parseCustomDate(endDateStr);
    const now = new Date();

    // 2. 验证日期有效性
    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {

      uni.navigateTo({
        url: '/pages/reserve/index',
      })
    }

    // 3. 检查时间关系
    if (now < startDate) {
      uni.showToast({
        title: '未到预约时间，预约时间为:' + uni.getStorageSync("startDate"),
        icon: 'none',
      })
      return 'before'; // 未到预约时间
    } else if (now >= startDate && now <= endDate) {


      // openRoomDoor()

      return 'active'; // 在预约时间内
    } else {
      uni.removeStorageSync("startDate")
      uni.removeStorageSync("endDate")

      uni.navigateTo({
        url: '/pages/reserve/index',
      })

      return 'expired'; // 已过结束时间
    }
  }

  const parseCustomDate = (dateStr) => {
    // 将 "2025/04/22 20:00" 转换为 Date 对象
    const [datePart, timePart] = dateStr.split(' ');
    const [year, month, day] = datePart.split('-');
    const [hours, minutes, second] = timePart.split(':');

    // 注意：月份是 0-11，所以要减1
    return new Date(year, month - 1, day, hours, minutes);
  }

  const timer = ref(null)

  onShow((option) => {

    timer.value = setInterval(() => {

      checkTimeRange(uni.getStorageSync("startDate"), uni.getStorageSync("endDate"));
    }, 3000)


  })
  onHide((option) => {

    clearInterval(timer.value)

  })
</script>

<template>
  <!-- 主要 -->
  <view class="main" :style="{ backgroundImage: `url(${baseBgImage})` }">
    <!-- 内容 -->
    <view class="content">
      <!-- 标题 -->
      <view class="title">
        <text class="welcome-text">欢迎使用</text>
        <text class="app-name">乖哈哈宠物舱</text>
      </view>

      <!-- 按钮区域 -->
      <view class="button-area">
        <button class="btn" :class="{ 'selected-btn': isCabinUnlocked }" @click="unlockCabin">
          <image :src="isCabinUnlocked ? unlockSelectedIcon : unlockDefaultIcon" class="btn-icon"></image>
          <text>解锁舱门</text>
        </button>

        <button class="btn" :class="{ 'selected-btn': !isCabinUnlocked }" @click="lockCabin">
          <image :src="isCabinUnlocked ? lockDefaultIcon : lockSelectedIcon" class="btn-icon"></image>
          <text>舱门上锁</text>
        </button>
      </view>

      <!-- 状态文本 -->
      <view class="status-text">
        <text>{{ isCabinUnlocked ? '舱门已开启！' : '舱门已上锁！' }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    // 背景图片自适应
    background-size: 100% 100%;
    position: relative;

    // 内容
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 80rpx 0;

      // 标题
      .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100rpx;
        margin-bottom: 60rpx;
        color: #fff;

        // 欢迎文本
        .welcome-text {
          font-size: 36rpx;
        }

        // 应用名称
        .app-name {
          font-size: 70rpx;
          font-weight: bold;
          margin-top: 10rpx;
        }
      }

      // 按钮区域
      .button-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 30rpx;

        // 按钮
        .btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 80%;
          height: 180rpx;
          border-radius: 16rpx;
          margin-bottom: 60rpx;
          border: none;
          background-color: white;
          color: #333;

          // 按钮图标
          .btn-icon {
            width: 60rpx;
            height: 60rpx;
          }

          // 按钮文本
          text {
            line-height: 60rpx;
            font-size: 40rpx;
            font-weight: 500;
          }
        }

        // 选中状态的按钮
        .selected-btn {
          background-color: rgb(0, 160, 234);
          color: white;
        }
      }

      // 状态文本
      .status-text {
        margin-top: 30rpx;

        text {
          color: white;
          font-size: 36rpx;
        }
      }
    }
  }
</style>
